<template>
  <div class="container">
    <!-- 侧边栏 -->
    <sidebarPage />
    <!-- 主体 -->
    <div class="container_main">
      <!-- 店铺信息 -->
      <div class="container_main_shop">店铺信息:{{ shopInfo.shopname }}(编号:{{ shopInfo.shopCode }})</div>
      <!-- 面包屑 -->
      <div class="container_main_info">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
          <el-breadcrumb-item>
            <a href="/">promotion management</a>
          </el-breadcrumb-item>
          <el-breadcrumb-item>promotion list</el-breadcrumb-item>
          <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 主体信息 -->
      <div class="container_main_body">
        <el-card style="height: 100%;">
          <router-view></router-view>
        </el-card>

      </div>
    </div>



  </div>
</template>

<script setup>
import sidebarPage from '@/components/sidebarPage.vue'
import { $_shopInfo } from '@/apis/shop';
import { UseuserInfo } from "@/store/user.js";
import { ref } from 'vue'
const shopInfo = ref('')
let { userInfo } = UseuserInfo()
let shopid = userInfo.sid

$_shopInfo({ shopid }).then(res => {
  shopInfo.value = res.data

})

</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  background-color: azure;

  &_main {
    flex: 1;
    display: flex;
    flex-direction: column;

    &_info {
      height: 40px;
      display: flex;
      align-items: center;
      background-color: aqua;
    }

    &_shop {
      line-height: 40px;
      background-color: aquamarine;
      margin-bottom: 20px;
    }

    &_body {
      flex: 1;
      margin: 20px;
      box-sizing: border-box;
    }
  }

}
.el-card__body{
  width: 100%;
  height: 100%;
}
</style>

  